<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="first">
  <select id="select">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
    <option value="%">/</option>
  </select>
  <input type="text" id="second">
  <button id="btn">=</button>
  <input type="text" id="total">
  <script>
    var num1 = document.querySelector('#first');
    var select = document.querySelector('#select');
    var num2 = document.querySelector('#second');
    var total = document.querySelector('#total');
    var btn = document.querySelector('#btn');
    // console.log(num1, select, num2, total, btn);

    btn.onclick = function () {
      var num1 = Number(first.value);
      console.log(num1);
      var opt = select.value;
      console.log(opt);
      var num2 = Number(second.value);
      console.log(num2);
      // var result = Number(total.value);
      // console.log(result);
      if (opt == '+') {
        total.value = num1 + num2
        // total.value = Math.round(num1 + num2);

      } else if (opt == '-') {
        total.value = num1 - num2
      }
      else if (opt == '*') {
        total.value = Math.round(num1 * num2);
      } else if (opt == '/') {
        total.value = Math.round(num1 / num2);
      } else if (opt == '%') {
        total.value = Math.round(num1 % num2);
      }

    }
  </script>
</body>

</html>